<template>
  <!-- 放置分配权限的弹层 -->
  <el-dialog title="分配权限" :visible="showDialog" @close="closeDialog">
    <!-- 放置树形组件和确认按钮 -->
    <!-- data props  -->
    <!-- 如果你想要复选 勾选框 您得设置一个字段 node-key 唯一标识-->
    <el-tree
      ref="permTree"
      :data="permission"
      :props="{ label: 'name' }"
      check-strictly
      default-expand-all
      show-checkbox
      node-key="id"
    />
    <!-- 确定和取消按钮 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="handlerConfirm"
          >确定</el-button
        >
        <el-button size="small">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  props: {
    permission: {
      type: Array,
      default: () => [],
    },
    showDialog: {
      type: Boolean,
      default: false,
    },

    selectCheck: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    //关闭弹窗、重置回显
    closeDialog() {
      this.$emit("update:showDialog", false);
      this.$refs.permTree.setCheckedKeys([]);
    },
    handlerConfirm() {
      this.$emit("confirm",this.$refs.permTree.getCheckedKeys());
    },
  },
  watch: {
    selectCheck: {
      handler() {
        this.$nextTick(() => {
          this.$refs.permTree.setCheckedKeys(this.selectCheck);
        });
      },
    },
  },
};
</script>

<style>
</style>